<layout name='layout'/>


<div class="">
    <h2 class="campaign_title">宝贝标题 : {$adgroup.title}</h2>

	<div class="two_third">
		<div id="charter" style="wdith:90%;" >
	
	
		</div>
	</div>


	<div class="one_third last">
		<h2>{$word}</h2>
		<ul class="unstyled">
			<li>市场均价 ： <span class="heavy orange">{$basic.avg_price}</span></li>
			<li>平均PV： {$basic.pv}</li>
			<li>平均点击 ： {$basic.click}</li>
			<li>平均点击率 ： {$basic.ctr}</li>
			<li>竞争度： {$basic.competition} </li>
			<li> 预测排名 :<span id="predict_rank"></span> </li>
			<li> 出价 :<span id="predict_price"></span> </li>
		</ul>
		
           <br class="clearall" />
        <div>
	           <div class="one_fifth">
	               <h4>出价</h4>
	               <h2 id="forcast_price">
	               </h2>
	           </div>
	           <div class="one_fifth" style="text-align:center;">
	               <h4>预计排名</h4>
	               <h2 id="forcast_rank"></h2>
	           </div>
	            <div class="one_fifth" style="text-align:center;">
	               <h4>预计点击量</h4>
	               <h2 id="forcast_click"></h2>
	           </div>
	           <div class="one_fifth last alignright">
	               <h4>预计消耗</h4>
	               <h2 id="forcast_cust"></h2>
	           </div>
        </div>	
        
	</div>

</div>

<br class="clearall" />

<div >
	<div class="one_half">
		<div id="keywordchart">
	
	
		</div>
	</div>
	
	<div class="one_half last">
		<div id="serial_data">
	
	
		</div>	
	</div>
</div>



<script type="text/javascript">
var word = ' {$word} ';
var _keyword_id = {$keyword_id};
var _competition = {$basic.competition};
var _price = null;

wt.get('/user/serial?word=' + word  , '' , function(r){
	var o = $.parseJSON(r);
	// draw chart and 
	$('#serial_data').highcharts({
	    title : { text: null},
	    xAxis : { 
	    	title : {text: '出价' , align: 'high'},
	        labels: {
	            formatter: function() {
	                return '￥' + this.value / 100.0;
	            }
	        }
	    },
	    yAxis : [
	         {title : {text : null} ,  labels: {enabled : false}},
	         {title : {text : null} , labels: {enabled : false} },
	         {title : {text : null} , labels: {enabled : false} },
	    ],
	    
	    colors: ['#88bbc8', '#ed7a53', '#9FC569'],
	    credits: {
	        enabled: false
	    },
        tooltip : {
        	crosshairs : true,
        	shared : true
        },
	    series: [{
	    	name : '时间序列',
	    	data : o.data
	    }]
	});	
	
});



wt.get('/user/test?word=' + word  , '' , function(r){
	var o = $.parseJSON(r);
	// draw chart and 
	$('#charter').highcharts({
        chart: {
            events: {
                click: function(e) {
                	url="/keyword/forcast?keyword_id="+_keyword_id+"&price="+_price;
                	wt.get(url , '' , function(r){
                		var o = $.parseJSON(r);
                		if(o.status == 200){
                			showchart(o.data);
                		}
                	});
                }
            }
        },
        
	    title : { text: null},
	    xAxis : { 
	    	title : {text: '出价' , align: 'high'},
	        labels: {
	            formatter: function() {
	                return '￥' + this.value / 100.0;
	            }
	        }
	    },
	    yAxis : [
	         {title : {text : null} ,  labels: {enabled : false}},
	         {title : {text : null} , labels: {enabled : false} },
	         {title : {text : null} , labels: {enabled : false} },
	    ],
	    
	    colors: ['#88bbc8', '#ed7a53', '#9FC569'],
	    credits: {
	        enabled: false
	    },
        tooltip : {
        	crosshairs : true,
        	shared : true,
        	formatter : function(){
        		var id_map = { '出价占比' : '#predict_rank' , '出价' : '#predict_price' }
        		_price = this.x;
   				var tmp =  '￥' + this.x / 100.0;
       			$('#predict_price').text( tmp );      				
        		$.each( this.points  , function(ix,ele){
        			if( ele.series.name  == '出价占比' ){
            			//$( id_map[ele.series.name] ).text(ele.y)
            			var tmp = Math.round( _competition *  ele.y );
            			$( id_map[ele.series.name] ).text( _competition - tmp - _competition * 0.05 );   
            			$( id_map[ele.series.name] ).append( '/' + Math.round( ele.y  * 100 , 2)  + '%');
        			}
        		});
        		return false;
        	}
        },
	    series: [{
	    	name : '出价占比',
	    	data : o.data
	    }]
	});	
	
});



function showchart(data){
    var chart = $('#keywordchart').highcharts();
    if( chart ){
    	chart.destroy();
    }
	// draw chart and 
	$('#keywordchart').highcharts({
        title : { text: null},
        xAxis : { 
        	title : {text: '出价' , align: 'high'},
            labels: {
                formatter: function() {
                    return '￥' + this.value / 100.0;
                }
            }
        },
        yAxis : [
             {title : {text : null} , reversed : true , labels: {enabled : false}},
             {title : {text : null} , labels: {enabled : false} },
             {title : {text : null} , labels: {enabled : false} },
        ],
        tooltip : {
        	crosshairs : true,
        	shared : true,
        	formatter : function(){
        		var id_map = { '预测排名' : '#forcast_rank' , '预测花费' : '#forcast_cust' , '预测点击量' : '#forcast_click'}
        		$('#forcast_price').text( '￥' + this.x / 100.0 ); 
        		$.each( this.points  , function(ix,ele){
        			var tmp = ele.series.name == '预测花费' ? '￥' +  ele.y / 100.0 : ele.y;
        			$( id_map[ele.series.name] ).text( tmp );
        		});
        		return false;
        	}
        },
        colors: ['#88bbc8', '#ed7a53', '#9FC569'],
	    credits: {
	        enabled: false
	    },
        
        series: [{
        	name : '预测排名',
            data: data.forcast['price_rank'],
            yAxis : 0
        },{
        	name : '预测花费',
        	data : data.forcast['price_cust'],
        	yAxis : 1
        },{
        	name : '预测点击量',
        	data : data.forcast['price_click'],
        	yAxis : 2
        }]
    });

}


</script>